<template>
  <div class="wrap">
    <el-dialog
      v-model="innerVisible"
      :show-close="false"
      :lock-scroll="true"
      custom-class="custom-class"
      :before-close="handleClose"
      :close-on-click-modal="closeOnClickModal"
      v-bind="$attrs"
    >
      <template #title>
        <span class="dialog-title">
          {{ title }}
        </span>
        <div class="dialog-control">
          <el-button
            v-if="!hideConfirm"
            v-prevent-re-click="submitForm"
            size="mini"
            :type="confirmType"
            :disabled="disableConfirm"
          >
            {{ confirmValue }}
          </el-button>
          <slot name="controlPanel" />
          <el-button
            v-if="!hideClose"
            size="mini"
            type="danger"
            @click.stop="close()"
          >
            取消
          </el-button>
        </div>
      </template>
      <slot />
    </el-dialog>
  </div>

</template>
<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue'
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    beforeClose: {
      type: Function as PropType<(fn: Function) => {} | null>,
      default: null
    },
    hideConfirm: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    disableConfirm: {
      type: Boolean,
      default: false
    },
    confirmType: {
      type: String,
      default: 'primary'
    },
    confirmValue: {
      type: String,
      default: '确定'
    },
    hideClose: {
      type: Boolean,
      default: false
    }
  },
  emits: ['submitForm', 'update:visible'],
  setup(props, ctx) {
    const innerVisible = ref(true)
    watchEffect(() => {
      innerVisible.value = props.visible
    })
    const hide = () => {
      ctx.emit('update:visible', false)
    }
    const handleClose = () => {
      if (typeof props.beforeClose === 'function') {
        props.beforeClose(hide)
      } else {
        hide()
      }
    }
    return {
      innerVisible,
      hide,
      handleClose,
      close: () => {
        handleClose()
      },
      submitForm: () => {
        ctx.emit('submitForm', handleClose)
      }
    }
  }
})
</script>
<style lang="less" scoped>
  .wrap :deep(.custom-class) {
    max-height: 600px;
    max-width: 100%;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    .dialog-title {
      color: #6dc46f;
      float: left;
      margin-top: 5px;
    }
    .dialog-control {
      float: right;
    }
    .el-form-item {
        margin-bottom: 18px !important;
      }
    .el-dialog__header {
      padding: 8px 15px;
      border-bottom: 1px solid #ddd;
    }
    .el-dialog__body {
      padding: 15px;
      overflow: auto;
    }
  }
  @media (max-width: 767px) and (orientation: portrait) {
    .wrap :deep(.custom-class) {
      width: 100% !important;
      margin-top: 0px !important;
      max-height: none !important;
      height: 100% !important;
      margin: 0px !important;
    }
  }
</style>
